import 'package:flutter/material.dart';
import '../core/responsive/breakpoints.dart';
import '../core/responsive/responsive_layout.dart';
import '../core/responsive/responsive_utils.dart';
import 'home_page.dart';
import 'explore_page.dart';
import 'profile_page.dart';

/// 企业级响应式主屏幕
/// 根据设备类型自动切换布局方案
class MainScreen extends StatefulWidget {
  const MainScreen({Key? key}) : super(key: key);

  @override
  State<MainScreen> createState() => _MainScreenState();
}

class _MainScreenState extends State<MainScreen> {
  int _currentIndex = 0;

  /// 页面配置
  final List<Widget> _pages = [
    const HomePage(),
    const ExplorePage(),
    const ProfilePage(),
  ];

  /// 导航目的地配置
  final List<NavigationDestination> _destinations = const [
    NavigationDestination(
      icon: Icon(Icons.home_outlined),
      selectedIcon: Icon(Icons.home),
      label: '首页',
    ),
    NavigationDestination(
      icon: Icon(Icons.explore_outlined),
      selectedIcon: Icon(Icons.explore),
      label: '发现',
    ),
    NavigationDestination(
      icon: Icon(Icons.person_outline),
      selectedIcon: Icon(Icons.person),
      label: '我的',
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return ResponsiveLayout(
      mobile: _buildMobileLayout(),
      tablet: _buildTabletLayout(),
      desktop: _buildDesktopLayout(),
      largeDesktop: _buildLargeDesktopLayout(),
    );
  }

  /// 手机端布局：底部导航栏
  Widget _buildMobileLayout() {
    return Scaffold(
      body: _pages[_currentIndex],
      bottomNavigationBar: NavigationBar(
        selectedIndex: _currentIndex,
        onDestinationSelected: _onDestinationSelected,
        destinations: _destinations,
      ),
    );
  }

  /// 平板端布局：侧边导航栏（紧凑）
  Widget _buildTabletLayout() {
    return Scaffold(
      body: Row(
        children: [
          NavigationRail(
            selectedIndex: _currentIndex,
            onDestinationSelected: _onDestinationSelected,
            destinations: _destinations
                .map((dest) => NavigationRailDestination(
                      icon: dest.icon,
                      selectedIcon: dest.selectedIcon,
                      label: Text(dest.label),
                    ))
                .toList(),
            labelType: NavigationRailLabelType.all,
            backgroundColor: Theme.of(context).colorScheme.surface,
          ),
          Expanded(
            child: _pages[_currentIndex],
          ),
        ],
      ),
    );
  }

  /// 桌面端布局：侧边导航栏（扩展）
  Widget _buildDesktopLayout() {
    return Scaffold(
      body: Row(
        children: [
          SizedBox(
            width: 280,
            child: NavigationRail(
              selectedIndex: _currentIndex,
              onDestinationSelected: _onDestinationSelected,
              destinations: _destinations
                  .map((dest) => NavigationRailDestination(
                        icon: dest.icon,
                        selectedIcon: dest.selectedIcon,
                        label: Text(dest.label),
                      ))
                  .toList(),
              extended: true,
              backgroundColor: Theme.of(context).colorScheme.surface,
              leading: Padding(
                padding: const EdgeInsets.only(top: 16, bottom: 8),
                child: Text(
                  'Moolio',
                  style: Theme.of(context).textTheme.headlineSmall?.copyWith(
                        fontWeight: FontWeight.bold,
                        color: Theme.of(context).colorScheme.primary,
                      ),
                ),
              ),
            ),
          ),
          Expanded(
            child: Container(
              margin: EdgeInsets.only(
                left: ResponsiveUtils.getResponsiveHorizontalPadding(context),
                right: ResponsiveUtils.getResponsiveHorizontalPadding(context),
                top: 16,
                bottom: 16,
              ),
              child: _pages[_currentIndex],
            ),
          ),
        ],
      ),
    );
  }

  /// 大屏桌面端布局：侧边导航栏 + 内容区域居中
  Widget _buildLargeDesktopLayout() {
    return Scaffold(
      body: Center(
        child: Container(
          constraints: const BoxConstraints(maxWidth: 1400),
          child: Row(
            children: [
              SizedBox(
                width: 320,
                child: NavigationRail(
                  selectedIndex: _currentIndex,
                  onDestinationSelected: _onDestinationSelected,
                  destinations: _destinations
                      .map((dest) => NavigationRailDestination(
                            icon: dest.icon,
                            selectedIcon: dest.selectedIcon,
                            label: Text(dest.label),
                          ))
                      .toList(),
                  extended: true,
                  backgroundColor: Theme.of(context).colorScheme.surface,
                  leading: Padding(
                    padding: const EdgeInsets.only(top: 16, bottom: 8),
                    child: Text(
                      'Moolio',
                      style: Theme.of(context).textTheme.headlineSmall?.copyWith(
                            fontWeight: FontWeight.bold,
                            color: Theme.of(context).colorScheme.primary,
                          ),
                    ),
                  ),
                ),
              ),
              Expanded(
                child: Container(
                  margin: EdgeInsets.only(
                    left: ResponsiveUtils.getResponsiveHorizontalPadding(context),
                    right: ResponsiveUtils.getResponsiveHorizontalPadding(context),
                    top: 16,
                    bottom: 16,
                  ),
                  child: _pages[_currentIndex],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  void _onDestinationSelected(int index) {
    setState(() {
      _currentIndex = index;
    });
  }
}